<template>
	<view class="page add_renewal">
		<view class="card">
			<view class="card_title">
				患者信息
			</view>
			<view class="form_item flex">
				<view class="item_title">
					会诊患者:
				</view>
				<view class="item_content flex-end">
					<view class="text flex" @click="gotoPage('/pagesCommon/patient/managementList?formPage=addRenewal')">
						<input type="text" v-model="patient.name" disabled placeholder="请选择" />
						<uni-icons type="right" size="12" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="card" style="margin-bottom: 200rpx;">
			<view class="card_title">
				描述病情
			</view>
			<view class="form_item">
				<view class="item_content">
					<view class="textarea" style="height: 150rpx;">
						<textarea auto-height v-model="form.diseaseDescribe"
							placeholder="例:持续治疗咽炎近1年，近期除声音嘶哑外无其它不适，想按上次的药方继续用药"></textarea>
					</view>
				</view>
			</view>
			<view class="form_item">
				<view class="item_title" style="width: auto">
					上传一份处方照片
					<view class="item_subtitle">
						<text class="red">须包含</text>医疗机构名称、患者信息、诊断、药方及用法用量、医生签名、开方日期
					</view>
				</view>
				<view class="item_content">
					<view class="image">
						<uni-file-picker v-model="form.attachment" :image-styles="imageStyles" fileMediatype="image" mode="grid"
							@select="select">
							<view class="file_text">
								<uni-icons type="plusempty" size="20"></uni-icons>
								<view>
									上传图片
								</view>
							</view>
						</uni-file-picker>
					</view>
				</view>
			</view>
			<view class="form_item flex">
				<view class="item_title">
					选择药态:
				</view>
				<view class="item_content flex-end">
					<picker mode="selector" :range="dict&&dict.drug_state" range-key="label" @change="getDrugState">
						<view class="text flex">
							<input type="text" v-model="chooseDrugState.label" disabled placeholder="请选择药态" />
							<uni-icons type="right" size="12" color="#999"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view class="form_item" v-if="patient.sex == 2">
				<view class="item_title" style="width: auto;">
					您现在是否处于孕期或以下特殊阶段?
				</view>
				<view class="item_content">
					<uni-data-checkbox v-model="form.specialStage" :localdata="dict&&dict.online_special_stage"
						:map="{text:'label',value:'value'}"></uni-data-checkbox>
				</view>
			</view>
			<view class="form_item">
				<view class="item_title" style="width: auto">
					补充说明
					<view class="item_subtitle">
						若有既往病史、过敏史、肝肾损伤、请在此填写
					</view>
				</view>
				<view class="item_content">
					<view class="textarea" style="height: 150rpx;">
						<textarea auto-height v-model="form.explanation" placeholder="例:青霉素过敏、患有糖尿病一期、肾脏增大但无损伤。"></textarea>
					</view>
				</view>
			</view>
			<view class="tips">
				温馨提示:
				<view class="tips_item">* 正规医疗机构最近6个月内所开处方 </view>
				<view class="tips_item">* 仅适用于<text class="red">常见病、慢性病</text>患者 </view>
				<view class="tips_item">* 患者已按本次上传处方用过药且病情稳定 </view>
				<view class="tips_item">* <text class="red"> 儿童、孕期、哺乳期、肝肾功异常</text> 患者开药前须咨询医生 </view>
				<view class="tips_item">* 暂不支持上传中成药或西药处方 </view>
			</view>
		</view>
		<view class="page_bottom">
			<view class="treaty">
				<view class="radio" :class="{'active':isAgree}">
					<uni-icons type="checkmarkempty" :size="8" color="#FFF" v-if="isAgree"></uni-icons>
				</view>
				<view class="label">
					我已阅读并遵守 <text class="blue" @click="isAgree = true">《服务协议》</text>
				</view>
			</view>
			<view class="btns" @click="createonlinePreForm">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDictList,
		fileUpload
	} from '@/api/common.js'
	import {
		createonlinePreForm
	} from '@/api/index.js'
	import {
		getUserInfo
	} from '@/utils/auth.js'
	export default {
		data() {
			return {
				imageStyles: {
					width: 70,
					height: 70,
				},
				isAgree: false,
				dict: {},
				patient: {},
				chooseDrugState: {},
				form: {
					patientId: undefined,
					diseaseDescribe: undefined,
					attachment: [],
					drugState: undefined,
					specialStage: undefined,
					explanation: undefined,
				}
			}
		},
		onLoad() {
			this.getDictList('online_special_stage')
			this.getDictList('drug_state')
		},
		methods: {
			getDictList(type) {
				getDictList({
					type
				}).then(res => {
					if (res.data.length <= 0) return
					this.$set(this.dict, type, res.data)
				}).catch(err => {})
			},
			gotoPage(url) {
				uni.navigateTo({
					url
				})
			},
			createonlinePreForm() {
				if (!this.form.patientId) {
					uni.showToast({
						icon: 'none',
						title: '请选择一名患者'
					})
					return
				}
				if (!this.form.diseaseDescribe) {
					uni.showToast({
						icon: 'none',
						title: '请输入病情描述'
					})
					return
				}
				if (!this.form.diseaseDescribe) {
					uni.showToast({
						icon: 'none',
						title: '请输入病情描述'
					})
					return
				}
				if (this.form.attachment.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请至少上传一张处方'
					})
					return
				}
				if (this.form.attachment.drugState) {
					uni.showToast({
						icon: 'none',
						title: '请选择药态'
					})
					return
				}
				createonlinePreForm({
					patientId: this.form.patientId,
					diseaseDescribe: this.form.diseaseDescribe,
					attachment: this.form.attachment.join(','),
					drugState: this.form.drugState,
					specialStage: this.form.specialStage,
					explanation: this.form.explanation,
					appUserid: getUserInfo().id
				}).then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			getDrugState(e) {
				let item = this.dict.drug_state[e.detail.value]
				if (item) {
					this.chooseDrugState = item
					this.form.drugState = item.value
				}
			},
			// 获取上传状态
			select(e) {
				let image = e.tempFilePaths[0]
				fileUpload({
					filePath: image
				}).then(res => {
					this.form.attachment.push(res.data)
				}).catch(err => {
					console.log(err)
				})
			},
			deleteImage(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add_renewal {
		.page_bottom {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #FFF;

			.treaty {
				padding: 20rpx 0;
				font-size: 24rpx;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: center;

				.radio {
					width: 30rpx;
					height: 30rpx;
					border-radius: 100%;
					border: 1px solid #999;
					background-color: #FFF;
					box-sizing: border-box;
					margin-right: 20rpx;
					text-align: center;
					line-height: 24rpx;

					&.active {
						border: none;
						color: #FFF;
						background-color: #3B6CFE;
					}
				}

				.blue {
					color: #3B6CFE;
				}
			}

			.btns {
				margin: 0 50rpx 30rpx 50rpx;
				padding: 30rpx 0;
			}
		}


		.card {
			margin-bottom: 30rpx;
		}

		.red {
			color: #EB1717;
		}

		.flex {
			display: flex;
			align-items: center;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			line-height: 40rpx;
		}

		.form_item {
			padding: 15rpx 0;

			.item_title {
				flex: 0 0 160rpx;
				width: 140rpx;
				font-weight: bold;
				font-size: 30rpx;

				.item_subtitle {
					margin-top: 20rpx;
					font-size: 26rpx;
					color: #999;
					line-height: 38rpx;


				}
			}

			.item_content {
				flex: auto;
				font-size: 22rpx;
				color: #999;

				::v-deep .checklist-group {
					margin-top: 30rpx;
				}

				::v-deep .checklist-box {
					flex: 0 0 50%;
					margin: 10rpx 0;
				}

				&.flex-end {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}

				.image {
					margin: 30rpx 0;

					.file_text {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 18rpx;
					}
				}

				.text {
					text-align: right;
				}

				.textarea {
					display: flex;
					align-items: flex-start;
					background-color: #F9F9F9;
					margin: 20rpx 0;
					padding: 20rpx;
					font-size: 22rpx;
					border-radius: 10rpx;

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>